<template>
  <view class="content" style="overflow-y: auto;">
    <view class="content-box">
      <view v-for="(item, index) in vehicleList" :key="item.id">
        <view class="swipe-content">
          <view class="item-box">
            <navigator :url="`/packageB/pages/common/vehicle-editing/vehicle-authentica?id=${item.id}`"
              hover-class="navigator-hover">
              <view class="cph-box">
                <view class="cph">
                  {{ item.vehicleNo }}
                </view>
              </view>
              <view class="status" :class="{ 'isReal': item.isIdentified, 'isnotReal': !item.isIdentified }">
                <view :class="{ 'status-icon': true, 'isReal': item.isIdentified }">
                  <view :class="{ 'status-icon-inner': true, 'isReal': item.isIdentified }"></view>
                </view>
                <text class="status-text font-14">
                  {{ item.isIdentified ? '已认证' : '未认证' }}
                </text>
              </view>
              <!-- <view class="unbind-btn" @click.stop="handleUnbind(item)">解绑</view> -->
              <uni-icons type="forward" size="20"></uni-icons>
            </navigator>
            <view class="footer" @click="handleUnbind(item)">
              <image :src="unBindIcon"></image>解绑
            </view>
          </view>
        </view>
      </view>
      <uni-load-more :status="pageParams.isMore" />
    </view>

    <view class="btns">
      <button type="primary" @click="handleAddCar">添加</button>
    </view>
  </view>
</template>

<script>
  import config from '@/config';
  import { getVehicle, deleteVehicle } from '@/api/me.js';
  export default {
    computed: {
      unBindIcon() {
        return config.baseImgUrl + '/unbind-icon.png';
      },
    },
    data() {
      return {
        options: [
          {
            text: '解绑',
            style: {
              backgroundColor: '#f56c6c'
            }
          }
        ],
        vehicleList: [],
        queryParam: {
          pageNo: 1,
          pageSize: 12
        },
        pageParams: {
          isMore: 'more'
        }
      };
    },
    onShow() {
      this.queryParam.pageNo = 1;
      this.pageParams.isMore = 'more';
      this.vehicleList = []
      this.getList();
    },
    onPullDownRefresh() {
      this.queryParam.pageNo = 1;
      this.pageParams.isMore = 'more';
      this.vehicleList = [];
      this.getList();
    },
    onReachBottom() {
      console.log('onReachBottom~~');
      if (this.pageParams.isMore == 'more') {
        this.queryParam.pageNo++;
        this.getList();
      }

      console.log('onReachBottom');
    },
    methods: {
      handleAddCar() {
        uni.navigateTo({
          url: '/packageB/pages/common/vehicle-editing/vehicle-authentica'
        });
      },
      // 解绑操作
      handleUnbind(item) {
        uni.showModal({
          title: '解绑',
          content: `您确认解绑【${item.vehicleNo}】吗？`,
          success: (res) => {
            if (res.confirm) {
              // 调用解绑接口
              this.unbindVehicle(item.id);
            }
          }
        });
      },
      // 解绑车辆
      async unbindVehicle(id) {
        try {
          // 调用解绑接口
          const res = await deleteVehicle(id);
          if (res.code === 0) {
            uni.showToast({ title: '解绑成功' });
            this.queryParam.pageNo = 1;
            this.pageParams.isMore = 'more';
            this.vehicleList = []
            this.getList(); // 刷新列表
          } else {
            uni.showToast({ title: '解绑失败', icon: 'none' });
          }
        } catch (e) {
          console.error('解绑失败:', e);
          uni.showToast({ title: '解绑失败', icon: 'none' });
        }
      },
      //获取车辆列表
      async getList() {
        try {
          //遍历对象过滤空值
          let data = {};

          Object.keys(this.queryParam).forEach((item) => {
            if (this.queryParam[item]) {
              data[item] = this.queryParam[item];
            }
          });
          const res = await getVehicle(data)
          if (res.code == 0) {
            const result = res?.data?.list || []
            this.vehicleList = [...this.vehicleList, ...result]
            if (res.data.total == this.vehicleList.length) {
              this.pageParams.isMore = 'noMore';
            } else {
              this.pageParams.isMore = 'more';
            }
          }
          //停止下拉刷新
          wx.hideNavigationBarLoading();
          //停止下拉刷新
          wx.stopPullDownRefresh();
        } catch (e) {
          console.log('getVehicle: ', e);
          return false;
        }
      }
    }
  };
</script>

<style lang="scss" scoped>
  .swipe-content {
    width: 100%;
  }

  .content-box {
    margin: 30rpx 30rpx 84rpx 30rpx;

    >view+view {
      margin-top: 20rpx;
    }

    .item-box {
      box-sizing: content-box;
      border-radius: 16rpx;
      position: relative;
      width: 93%;
      background: #fff;
      padding: 30rpx 30rpx 20rpx 30rpx;

      navigator {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .cph-box {
        min-width: 160rpx;
        background: #FFE24A;
        overflow: hidden;
        height: 78rpx;
        border-radius: 5rpx;

        .cph {
          font-weight: bold;
          font-size: 35.55rpx;
          min-width: 160rpx;
          border: 1px solid #333;
          padding: 0 14rpx;
          margin: 4rpx;
          border-radius: 5rpx;
          height: 70rpx;
          line-height: 70rpx;
        }
      }

      .status {
        position: absolute;
        right: 90rpx;
        width: 160rpx;
        height: 60rpx;
        line-height: 60rpx;
        border-radius: 10rpx;
        text-align: center;
        border-radius: 10rpx;

        .status-icon {
          width: 24rpx;
          height: 24rpx;
          display: inline-block;
          margin-right: 6rpx;
          border-radius: 50%;
          background-color: rgba(247, 134, 0, 0.3);
        }

        .status-icon.isReal {
          background-color: rgba(64, 158, 254, 0.3);
        }

        .status-icon-inner {
          width: 16rpx;
          height: 16rpx;
          border-radius: 50%;
          background-color: rgba(247, 134, 0, 1);
          margin: 4rpx 0 0 4rpx;
        }

        .status-icon-inner.isReal {
          background-color: rgba(64, 158, 254, 1);
        }
      }

      .status.isReal {
        background: rgba(64, 158, 254, 0.1);
        color: #409EFE;
      }

      .status.isnotReal {
        background: rgba(247, 134, 0, 0.1);
        color: #F78600;
      }
    }

    .footer {
      margin-top: 20rpx;
      border-top: 2rpx solid #F1F2F5;
      display: flex;
      color: #FF4D4F;
      font-size: 30rpx;
      padding-top: 20rpx;
      justify-content: center;
      align-items: center;

      image {
        width: 32rpx;
        height: 32rpx;
        margin-right: 10rpx;
      }
    }
  }

  .unbind-btn {
    padding: 0 8px;
    color: #fff;
    background-color: #f56c6c;
  }
</style>